JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.
In this article, we’ll look at how to do checks in our app to only run things when the given condition is true or false.
Types of Checks We Should Do
If we want our JavaScript program to be robust. Then there’re a few kinds of checks that we must to in our app.
There’re 3 kinds of checks. They’re the following:
- Existence check — checking if something is available
- Type check — checking if the data type is correct or if a property exists
- Value check — checking if something has the value that we’re looking for
Conditional Statements
We can check for values and run code accordingly with conditional statements. There’re a few types of conditional statements in JavaScript. They include if statements, switch statements, and ternary operators.
if statements are the most versatile kind of conditional statements. The code is run if the expression inside the if statement is truthy.
Truthy expressions are the expressions that evaluate to true when they’re coerced to a boolean. Falsy expressions are ones that evaluate to false when they’re coerced to a boolean.
Falsy values in JavaScript are 0, false , '' (empty string), undefined , null , and NaN . Everything else is truthy.
For instance, we can write the following if statement:
if (foo === 1) {
//...
} else if (foo === 2) {
//...
} else {
//...
}
In the code above, we have several checks in our if statement. First, we check if foo is 1 with the === operator and run something if it’s true .
Otherwise, we check if foo is 2, then we run something if that’s true .
In all other cases, as indicated by the else block at the end, we run something if foo isn’t 1 or 2.
When checking for things, we should use the === operator to do the checks. If we want to check if something isn’t equal to something, then we use the !== operator.
This is because they don’t do type coercion before doing the comparison.
Switch Statements
The kind of comparison above can also be done with the switch statement.
For instance, we can rewrite our example with the switch statement as follows:
switch (foo) {
case 1: {
//...
break;
}
case 2: {
//...
break;
}
default: {
//...
break;
}
}
In the code above, we have switch (foo) , which indicates that we check foo for the given value. In this case, we check for 1 and 2 as indicated by the case blocks. They are used for running code if foo is 1 or 2 respectively.
We enclose the case statements in blocks so that we don’t have to worry about block-scoped variables clashing with other block-scoped variables that have the same name if we want to reuse the name.
It’s also important that we the break; statement at the end of each block so that the code for the other cases won’t run and only the block for the case that matches will run.
The default block is for running code when foo isn’t 1 or 2, or doesn’t match the cases given in the case blocks in general.
This is like the else block that we have in the if statement example.
Ternary Operator
The ternary operator is useful for writing condition checks that only have 2 cases, and that we want to return something for one case and something else for another.
The operator is denoted by the ? , and we distinguish the cases with the : operator.
For instance, we can use it as follows:
const foo = 1;
const x = (foo === 1 ? 'foo' : 'bar');
In the code above, we have the expression:
(foo === 1 ? 'foo' : 'bar')
which uses the ternary operator. This expression means that if foo is 1, then we return 'foo' . Otherwise, we return 'bar' .
Therefore, since foo is 1, 'foo' is returned, and we assign that to x .
Conclusion
We should do several kinds of checks in our app to make sure that our app runs correctly and only does things when we have the data we’re looking for.
To do the checks, we should use conditional statements like if statements, switch statements, or ternary expressions.
